<template>
    <div class="home" style="height: 100%;">
        <el-container style="height: 100%;">
            <el-aside :width="sideWidth+'px'"
                      style="background-color: rgb(238, 241, 246);height: 100%;box-shadow: 2px 0 6px rgba(0,21,41,.35);">
                <el-sysMenu style="height: 100%;overflow-x: hidden;"
                         background-color="rgb(48,65,86)"
                         text-color="#fff"
                         :collapse-transition="false"
                         :collapse="isCollapse"
                         router
                         :unique-opened="true"
                >
                    <div style="height: 60px;line-height: 60px;text-align: center;">
                        <img src="../assets/logo.png" style="width: 20px;position: relative;top: 5px" alt="">
                        <b style="color:white" v-show="logoText">后台管理系统</b>
                    </div>
                    <el-submenu :index="sysMenu.path" v-for="sysMenu in menuList">
                        <template slot="title">
                            <i :class="sysMenu.icon"></i><span slot="title">{{ sysMenu.name }}</span></template>
                        <el-sysMenu-item :index="item.path" v-for="item in sysMenu.children">
                            <i :class="item.icon"></i>
                            <span>{{ item.name }}</span>
                        </el-sysMenu-item>
                    </el-submenu>
                </el-sysMenu>
            </el-aside>

            <el-container>
                <el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex">
                    <div style="flex: 1; font-size: 20px">
                        <span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span>
                    </div>
                    <el-dropdown @command="handleCommand" style="width: 70px;cursor: pointer">
                        <span>无所谓</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i>
                        <el-dropdown-sysMenu slot="dropdown">
                            <el-dropdown-item>个人信息</el-dropdown-item>
                            <el-dropdown-item command="signOut">退出</el-dropdown-item>
                        </el-dropdown-sysMenu>
                    </el-dropdown>

                </el-header>

                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src

    import store from '../store'
    import {resetRouter} from "@/router";

    export default {
        name: 'HomeView',
        data() {
            return {
                menuList: [],
                collapseBtnClass: 'el-icon-s-fold',
                isCollapse: false,//是否隐藏导航栏
                sideWidth: 200,//隐藏后导航栏的宽度
                logoText: true,//是否隐藏项目名称
            }
        },
        methods: {
            collapse() {
                this.isCollapse = !this.isCollapse
                if (this.isCollapse) { //隐藏导航栏
                    this.logoText = false
                    this.sideWidth = 64
                    this.collapseBtnClass = "el-icon-s-unfold"
                } else {
                    this.logoText = true
                    this.sideWidth = 200
                    this.collapseBtnClass = "el-icon-s-fold"
                }
            },
            handleCommand (command) {
                if(command ==="signOut"){
                    sessionStorage.removeItem('token')
                    sessionStorage.removeItem('menuList')
                    resetRouter()
                    console.log('登出后的路由', this.$router.getRoutes())
                    this.$router.push('/login')
                }
            }
        },
        created() {
            this.menuList = store.getters.GET_MENULIST
        }
    }
</script>
<style scoped>
    /*子菜单悬停颜色*/
    .el-sysMenu-item:hover {
        background-color: #001528 !important;
    }

    /*菜单父级悬停颜色*/
    .el-submenu /deep/ .el-submenu__title:hover {
        background-color: rgb(45, 61, 81) !important;
    }

    /*.el-sysMenu-item.is-active {*/
    /*    background-color: #001528 !important;*/
    /*}*/
    /*子菜单的背景色*/
    .el-sysMenu-item {
        background-color: #1F2D3D !important;
    }

</style>
